<template>
 <div  class="userinfo">
    <group title="个人中心">
      <cell-box class="message">
        <div>
           <img src="" alt="">
           <h2 v-text="user"></h2>
           <h3>男</h3>
        </div>
      </cell-box>
      <cell-box is-link :link="{name:'Login'}">
        个人信息修改
      </cell-box>
      <cell-box is-link :link="{name: 'OrderList'}">
        我的订单
      </cell-box>
      <cell-box is-link :link="{name:'Update'}">
        修改密码
      </cell-box>
        <x-button type="primary" class="btn" @click.native="quit()">退出登录</x-button>
    </group>
 </div>
</template>
<script>
import { Group, CellBox,XButton } from 'vux';
import Cookies from 'js-cookie';
export default {
  name: 'UserInfo',
  components:{
    Group,
    CellBox,
    XButton,
  },
  data(){
    return {
     user:''
    }

  },
  methods:{
     quit(){
      Cookies.remove('user')
      this.$router.push({
        name: 'Login',
      })
     }
  },
  created(){
    var user = Cookies.get('user');
   console.log(user)
    this.user = user
  }
};
</script>
<style>
.userinfo{
  margin-bottom:50px;
}
.message{
  width: 80%;
  height: 300px;
  margin: 0 auto;
}
.message div {
  width: 100%;
  height: 100%;
}
.message  img{
  display: block;
  margin: 40px auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: red;
}
.btn{
  margin: 20px 0;
}
h2,h3{
  text-align: center;
}
</style>


